.k-design-box {
	$red: red;
	$shadow-color: #285062;
	[contenteditable="true"] {
		outline: none;
	}
	transition: all 0.5s;
	display: flex;
	height: 100%;
	.cp-pool {
		width: 30%;
		height: 100%;
		padding: 0 20px;
		.cp {
			cursor: move;
			padding: 16px 6px;
			margin-bottom: 12px;
			box-shadow: 1px 1px 1px 1px gray;
		}
	}
	.cp-design {
		height: 100%;
		flex-grow: 1;
		overflow: auto;
		.delete {
			color: $red;
			cursor: pointer;
		}
		.k-checkbox {
			cursor: pointer;
			margin: auto 4px;
			position: relative;
			&::before {
				content: "";
				width: 16px;
				height: 16px;
				display: block;
				outline: 1px solid #666;
			}
		}
		.k-radiobox {
			cursor: pointer;
			margin: auto 4px;
			position: relative;
			&::before {
				content: "";
				width: 16px;
				height: 16px;
				display: block;
				border-radius: 50%;
				outline: 1px solid #666;
			}
		}
		.k-input {
			display: block;
			width: 300px;
			outline: 1px solid #333;
			height: 35px;
			cursor: text;
		}
		.cp.dragging-item {
			padding: 16px 6px;
			box-shadow: 0 0 20px 2px $shadow-color inset;
		}
		.no-data {
			height: 300px;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 0 20px 2px $shadow-color inset;
		}
		.ques-block {
			margin-bottom: 12px;
			padding: 6px;
			&.active-item {
				box-shadow: 0 0 20px 2px $shadow-color inset;
				.delete,
				.ques-opt-label-ope {
					opacity: 1 !important;
				}
				.ques-opt-add {
					opacity: 1 !important;
				}
			}
			.ques-opt-title {
				display: flex;
				position: relative;

				.delete,
				.move,
				input {
					margin: 0 6px;
					display: block;
				}
				.move {
					cursor: move;
				}
				.star::before {
					content: "*";
					display: block;
					top: 0;
					left: 0;
					color: $red;
					width: 10px;
					height: 10px;
				}
			}
			.ques-opt-title-ope {
				display: flex;
				margin-left: auto;
			}
			.ques-opt-body {
				margin-left: 20px;
				.ques-opt-item-table {
					margin: 16px 6px;
				}
				.ques-opt-item {
					display: flex;
					margin: 16px 6px;
					align-items: center;
					&:hover {
						.ques-opt-label-ope {
							opacity: 1;
							cursor: pointer;
						}
					}
					.ques-opt-label {
						display: flex;
						.trans-in {
							margin-left: 4px;
						}
					}
					.ques-opt-label-ope {
						opacity: 0;
						margin-left: 8px;
					}
				}
				.ques-opt-add {
					font-size: 12px;
					cursor: pointer;
					color: #409eff;
					opacity: 0;
					* {
						margin: 0 6px;
					}
				}
			}
			&.matrix-checkbox-question {
				.ques-opt-body {
					table {
						width: 100%;
						border-collapse: collapse;
						th,
						td {
							padding: 8px;
							text-align: left;
							border: 1px solid #444;
						}
						.ques-opt-row-item {
							flex-grow: 1;
						}
						.ques-opt-row,
						.ques-opt-col {
							display: flex;
							justify-content: space-between;
							align-items: center;
							.ques-opt-row-ope,
							.ques-opt-col-ope {
								.delete {
									opacity: 0;
								}
							}
							&:hover {
								.ques-opt-row-ope,
								.ques-opt-col-ope {
									opacity: 1;
								}
							}
						}
					}
				}
			}
		}
	}
}
